.sidebar {
    position: fixed;
    top: var(--header-height-normal);
    left: 0;
    width: clamp(100px, 20vw,200px);
    height: calc(100vh - clamp(40px, 6vw, 60px));
    background-color: var(--main-bg);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: clamp(10px, 2vw, 20px);
    // border-right: 1px solid var(--pale-txt);
    transition: transform 0.25s ease-in-out;
    z-index: 1;

    a {
        color: var(--main-txt);
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        list-style: none;
        gap: clamp(10px, 1vw, 20px);

        hr {
            width: 100%;
            height: 1px;
            background-color: var(--pale-txt);
            border: 0;
        }

        li {
            display: flex;
            align-items: center;
            gap: clamp(3px, 1vw, 5px);
        }
    }
}

.collapsed {
    transform: translateX(-100%);
}

.opened {
    transform: translateX(0);
}

@media (max-width: 1240px) {
    .sidebar {
        top: calc(2 * var(--header-height-normal) - clamp(25px, 3vw, 30px));
        height: calc(100vh - (2 * var(--header-height-normal) - clamp(25px, 3vw, 30px)));
    }
}